<template>
  <div class="container">
    <div class="rate">分数：{{value}}</div>
    <div class="rate_inner">
      <div class="rate_item"
        v-for="(rate, index) in count"
        :key="index"
        :class="{
          active: getActive(index),
          disabled
        }"
        @click="handleClick(index)"
        @mouseenter="handleMouseenter(index)"
        @mouseleave="handleMouseleave"
      >{{character}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    character: {
      type: String,
      require: true
    },
    count: {
      type: Number,
      default: 8
    },
    disabled: Boolean
  },
  data() {
    return {
      enterIndex: -1,
    };
  },
  methods: {
    getActive(index) {
      if (this.disabled) {
        // 不可编辑状态只用判断
        return index + 1 <= this.value
      } else {
        // this.enterIndex !== -1 鼠标是否滑过状态，
        const checkNumber = this.enterIndex !== -1 ? this.enterIndex + 1 : this.value
        return index + 1 <= checkNumber
      }
    },
    handleClick(index) {
      if (this.disabled) return
      this.$emit('input', index + 1)
    },
    handleMouseenter(index) {
      this.enterIndex = index
    },
    handleMouseleave() {
      this.enterIndex = -1
    },
  },
};
</script>

<style lang="less" scoped>
.rate_inner {
  display: flex;
  .rate_item {
    cursor: pointer;
    padding: 0 5px;
    &.active {
      color: #f5aa3d;
    }
    &.disabled {
      cursor: not-allowed;
    }
  }
}
</style>
